<template>
<div class="logo">
    <div class="l_img">
        <h1>BOKEY</h1>
        <p>A note manager</p>
    </div>
</div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* logo + 标题 */
.logo {
    height: 110px;
    width: 100%;
    border-radius: 50px;
}

.l_img {
    position: relative;
    background: url('@/assets/littelBoy.png') no-repeat;
    background-size: cover;
    height: 100px;
    width: 100px;
    border-radius: 50px;
}

.l_img h1 {
    position: absolute;
    top: 20%;
    left: 90px;
    font: 45px sans-serif;
    font-weight: bolder;
    color: #fff;
}

.l_img p {
    position: absolute;
    top: 80%;
    left: 100px;
    font: 10px sans-serif;
    font-weight: 500;
    width: 150px;
    color: rgba(255, 255, 255, 0.6);
}
</style>